<%@ page language="java" pageEncoding="utf-8" contentType="text/html; utf-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="This is my page">
    <meta name="content-type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" type="text/css"  href="${pageContext.request.contextPath}/css/bootstrap.css">
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/style.css">
    <link rel="stylesheet" type="text/css" href="themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="themes/icon.css">
    <script src="js/jquery.min.js"></script>
    <script src="js/jquery.easyui.min.js"></script>
    <style type="text/css">
      *{
        margin: 0;
        padding: 0;
      }
      #head {
        height: 120px;
        width: 100px;
        text-align: center;
        position: relative;
      }
      #wrap .logGet {
        height: 600px;
        width: 368px;
        position: absolute;
        background-color: rgba(255, 255, 255, 0.7);
        top: 40%;
        right: -110px;
      }
      .logC  input {
        width: 100%;
        height: 45px;
        background-color: #659991;
        border: none;
        color: white;
        font-size: 18px;
      }
      .logGet .logD.logDtip .p1 {
        display: inline-block;
        font-size: 28px;
        margin-top: 30px;
        width: 86%;
      }
      #wrap .logGet .logD.logDtip {
        width: 86%;
          border-bottom: 1px solid #659991;
        margin-bottom: 60px;
        margin-top: 0px;
        margin-right: auto;
        margin-left: auto;
      }
      .logGet .lgD img {
        position: absolute;
        top: 12px;
        left: 8px;
      }
      .logGet .lgD input {
        width: 100%;
        height: 42px;
        text-indent: 2.5rem;
      }
      #wrap .logGet .lgD {
        width: 86%;
        position: relative;
        margin-bottom: 30px;
        margin-top: 30px;
        margin-right: auto;
        margin-left: auto;
      }
      #wrap .logGet .logC {
        width: 86%;
        margin-top: 0px;
        margin-right: auto;
        margin-bottom: 0px;
        margin-left: auto;
      }
      .title {
        font-family: "宋体";
        color: #FFFFFF;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 36px;
        height: 40px;
        width: 30%;
      }
      .error {
        color: darkred;
      }
    </style>
    <script type="text/javascript">
      function ReloadCode(){
        var time=new Date();
        document.getElementById("imagecode").src="<%=request.getContextPath()%>/RandomCodeServletTest?method=randomCode&d="+time;
      }

      window.onload = function () {
        //绑定onsubmit事件
        document.getElementById("form").onsubmit = function () {
          return checkUsername() && checkPassword();
        }
        document.getElementById("sno").onblur = checkUsername;
        document.getElementById("password").onblur = checkPassword;
      }

      //校验用户名
      function checkUsername() {
        //获取用户名的值
        var username = document.getElementById("sno").value;
        //定义正则表达式
        var reg_username = /^([a-zA-Z0-9_-])/;
        //判断值是否符合正则表达式的规则
        var flag = reg_username.test(username);
        //提示信息
        var s_username = document.getElementById("s_sno");
        if (flag) {

          s_username.innerHTML = "用户名格式正确";
        } else {
          //提示红色错误信息
          s_username.innerHTML = "用户名格式有误！";
        }
        return flag;
      }

      //校验密码
      function checkPassword(){
        //1.获取密码的值
        var password = document.getElementById("password").value;
        //2.定义正则表达式
        var reg_password = /^\w{6,12}$/;
        //3.判断值是否符合正则的规则
        var flag = reg_password.test(password);
        //4.提示信息
        var s_password = document.getElementById("s_password");
        if(flag == false){
          s_password.innerHTML = "密码格式有误";
        }
        return flag;
      }

    </script>
  </head>
  <body style="width: 100%;height: 100vh;background: url('img/preview111.jpg');background-repeat:no-repeat; background-size: cover;">
  <nav id="menu" class="navbar navbar-default navbar-fixed-top">
    <div class="container">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
        <a class="navbar-brand page-scroll" href="index.jsp">西安文理学院社团管理系统</a>
      </div>
      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <ul class="nav navbar-nav navbar-right">
          <li><a href="index.jsp">首页</a></li>
          <li><a href="${pageContext.request.contextPath}/CommunityServlet?method=findCommunityCategory">社团</a></li>
          <li><a href="${pageContext.request.contextPath}/IndexServlet?method=findHonorWall">荣誉墙</a></li>
          <li><a href="${pageContext.request.contextPath}/IndexServlet?method=findHallOfFame">名人堂</a></li>
          <li><a href="${pageContext.request.contextPath}/Report.jsp">匿名投诉</a></li>
          <li><a href="${pageContext.request.contextPath}/loginForm.jsp">登录</a></li>
          <li><a href="${pageContext.request.contextPath}/StudentServlet?method=findFactoryId">注册</a></li>
          <c:if test="${ not empty student}">
            <li><a href="${pageContext.request.contextPath}/person/personInfo.jsp">我的</a></li>
          </c:if>
        </ul>
      </div>
    </div>
  </nav>
  
  <div style="position: absolute;top: 100px;left: 900px" id="form">

    <div class="header" id="head">
    </div>
    <div class="wrap" id="wrap">
      <div class="logGet">
        <!-- 头部提示信息 -->
        <div class="logD logDtip">
          <p class="p1">欢迎登录！</p>
        </div>
        <!-- 输入框 -->
        <form method="post" action="${pageContext.request.contextPath}/StudentServlet?method=login">
          <div class="lgD">
            <input type="text" name="username" id="sno"
                   placeholder="用户名" />
            <span id="s_sno" class="error"></span>
          </div>
          <div class="lgD">
            <input type="password" name="password" id="password"
                   placeholder="输入密码" />
            <span id="s_password" class="error"></span>
          </div>
          <div style="text-align: center">
            <span style="color:#36514d; font-size: 18px">登陆角色:</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            学生<input checked="checked" type="radio" name="power" value="xs"/>
            社长<input type="radio" name="power" value="sz"/>
            管理员<input type="radio" name="power" value="admin"/>
          </div>
          <div class="lgD">
            <img alt="验证码" id="imagecode" src="<%=request.getContextPath()%>/RandomCodeServlet"/><br/>
            <a href="javascript:ReloadCode();" style="margin-left: 120px">看不清楚，换一张</a><br/>
            <strong style="color: red">${msg}</strong>
            <input type="text" style="margin-top: 20px" placeholder="输入验证码" name="yzm"/><br/>
            <strong style="color: red">${msg}</strong>
          </div>
          <div class="logC">
            <input value="登录" type="submit">
          </div>
        </form>
      </div>
    </div>
    </div>
  </div>
  </body>
</html>
